<template>
	<view class="dispatchWay">
		<view class="headWay">
			外送
		</view>
		<view class="body">
			<view class="box" @click="test">
				<view class="left">收货地址:</view>
				<view class="center">
					<!-- address是默认地址,addressObj是现选地址 -->
					<view v-if="address.id||addressObj.id">
						<view class="detail">{{!addressObj.id ? address.content: addressObj.content}}</view>
						<view class="userInfo">
							{{!addressObj.id ? address.hostname : addressObj.hostname}}-{{!addressObj.id ? address.hostphone : addressObj.hostphone}}
						</view>
					</view>
					<view class="address" v-else>
						添加收货地址
					</view>
				</view>
				<view class="right" @click.stop="toAddress">
					<u-icon name="arrow-right" color="#999" size="18"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		name: "dispatchWay",
		props: {
			address: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		computed: {
			...mapGetters(["addressObj"]),
		},
		methods: {
			toAddress() {
				uni.navigateTo({
					url: "/pages_shop/address/list"
				})
			},
			test() {
				console.log("组件vuex", this.addressObj);
			}
		}
	}
</script>

<style lang="scss">
	.dispatchWay {
		.headWay {
			width: 100%;
			height: 78rpx;
			@include flex-box-set();
			background: #fff;
			color: $brand-theme-color;
			border-radius: 30rpx 30rpx 0 0;
			font-family: "微软雅黑";
			font-size: 40rpx;
			font-weight: bold;
		}

		.body {
			background: #fff;
			padding: 25rpx;
			border-top: 1rpx solid #eee;

			.box {
				@include flex-box();
				background: #f7f7f7;
				border: 1rpx solid #bdbdbd;
				border-radius: 15rpx;
				padding: 20rpx 20rpx;

				.left {}

				.center {
					flex: 1;
					padding: 0 30rpx;

					.detail {
						font-size: 28rpx;
					}

					.userInfo {
						padding: 10rpx 0 0 0;
						font-size: 30rpx;
					}

					.address {}
				}

				.right {}
			}
		}
	}
</style>
